<script setup>
  import { ref } from 'vue'
  import { getHotBoat } from '@/api/boat.js'
  import { getBoatList } from '@/api/boat.js'
  import router from "@/router/index.js";

  const imgArr=ref(["https://file.40017.cn/ship/img/ship_pc/ship_pc_index_default_nologo.jpg"]) //轮播图
  const embark=ref("") //出发地
  const destination=ref("") //目的地
  const date=ref("") //日期

  //转换表单内容
  const swap=()=>{
    let temp=embark.value
    embark.value=destination.value
    destination.value=temp
  }
  //热门航线列表
  const hotline=ref([])
  //热门船只列表
  const hotBoat = async ()=>{
    const res = await getHotBoat()
    console.log(res.data.data)
    hotline.value=res.data.data
  }
  hotBoat()

  const getData=()=>{
    //使用模版字符串拼接
    router.push(`/boatSearch?embark=${embark.value}&destination=${destination.value}&date=${date.value}`)

    // //使用param拼接
    // router.push({
    //   name:"boatSearch",
    //   params:{
    //     embark:embark.value,
    //     destination:destination.value,
    //     date:date.value
    //   }
    // })
    //提示成功

    ElMessage.success("成功")
  }

  const bottom=ref([
    {
      title1:"品牌保障",
      title2:"提供正规的代购服务",
    },
    {
      title1:"快速反馈",
      title2:"第一时间短信通知",
    },
    {
      title1:"方便快捷",
      title2:"港口直接取票上传",
    },
    {
      title1:"支付方便",
      title2:"支付宝、微信支付",
    }
  ])
</script>

<template>
  <el-container>

    <el-header class="boat-top">  <!--//船票预订-->
      <!--    轮播图-->
      <el-carousel height="350px" motion-blur>
        <el-carousel-item v-for="item in imgArr" :key="item">
          <img :src=item alt="" class="imgBoat">
        </el-carousel-item>
      </el-carousel>

      <!--    表单-->
      <div class="slider">
        <div class="ticket">
          <div class="header"><i class="ship_ico"></i>船票</div>
          <div class="choose">
            <div class="choose-city">
              <div class="city-embark">
                <p class="text">出发城市</p>
                <div><el-input v-model="embark" style="width: 260px;height: 34px" placeholder="可输入城市" /></div>
              </div>
              <div class="city-destination">
                <p class="text">到达城市</p>
                <div><el-input v-model="destination" style="width: 260px;height: 34px" placeholder="可输入城市" /></div>
              </div>
            </div>
            <div class="city-date">
              <div class="text">出发日期</div>
              <div><el-date-picker style="width: 260px;height: 34px" v-model="date" type="date" placeholder="选择出发日期" value-format="YYYY-MM-DD"/></div>
            </div>
            <div class="button">
              <button @click="getData">查询</button>
            </div>
            <div data-v-efcb4e68="" id="J-exchange" class="exchange"><em data-v-efcb4e68="" @click="swap"></em></div>
          </div>
        </div>
      </div>
    </el-header>

    <!--    内容-->
    <el-main>
      <!--  热门航线展示-->
      <div class="hot-line">
        <div class="hot-title">
          <h2 class="hot-title-left-text">热门航线</h2>
          <p class="hot-title-right-text">热门航线</p>
        </div>
        <div class="hot-content">
          <div class="tab_list">
            <ul class="clearfix">
              <li v-for="item in hotline" :key="item">
                <div title="码头历史久远，在清朝被指定为官方码头">
                  <div class="pic_box">
                    <img :src="item.picture" data-original-background="none" style="background: none;">
                    <div class="meng_img"></div>
                  </div>
                  <div class="detail_box">
                    <div>
                      <span>{{item.beginningName}}-{{item.destinationName}}</span>
                      <em>
                        <i>¥</i>{{item.price}}<i class="qi">起</i>
                      </em>
                    </div>
                    <p>{{item.content}}</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>


      <!--  品牌保障-->
      <div class="bottom">
        <ul>
          <li class="bt-one" v-for="item in bottom" :key="item">
            <h2></h2>
            <p>
              <span>{{item.title1}}</span>
              <span>{{item.title2}}</span>
            </p>
          </li>
        </ul>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
  :deep(.s_t_middle) {
    display: none;
  }
  :deep(.yantai){
    display: none;
  }
  .imgBoat{
    transform: translate(-70px,0px);
  }

  .boat-top{
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
  }

  .el-carousel{
    width: 100%;
    height: 350px;
    background-color: #f5f5f5;
    position: absolute;
    z-index: 0;
  }


.slider{
  width: 1200px;
  height: 350px;
  margin: 0 auto;
  position: relative;
}
.ticket{
  width: 410px;
  height: 300px;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  z-index: 10;
  top: 25px;
  left: 0;
  .header{
    color: #ffffff;
    font-weight: 500;
    font-size: 20px;
    line-height: 40px;
    text-indent: 3em;
    background-color: #475769;
    i{
      display: block;
      width: 30px;
      height: 41px;
      position: absolute;
      left: 25px;
      top: 0;
      background: url(https://file.40017.cn/ship/img/ship_pc/ship_pc_boat_icon.png) no-repeat 50%;
      background-size: 100%;
    }
  }
  .choose{
    .text{
      line-height: 25px;
      font-size: 16px;
      color: #b2b2b2;
      margin-right: 10px;
    }
    .choose-city{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      >div {
        display: flex;
        margin-left: 22.5px;
        margin-top: 20px;
        align-items:center
      }
    }
    .exchange{
      width: 30px;
      height: 58px;
      border: 1px solid #dfdfdf;
      border-left: 0 none;
      position: absolute;
      top: 75px;
      right: 20px;
      cursor: pointer;
      em{
        display: block;
        width: 28px;
        height: 28px;
        font-size: 16px;
        background: #fff;
        line-height: 28px;
        text-align: center;
        border-radius: 3px;
        margin-top: 15px;
        margin-left: 17px;
        background: url(https://file.40017.cn/ship/img/ship_pc/ship_pc_exchange_icon.png) no-repeat 50%;
      }
    }
    .city-date{
      display: flex;
      align-items:center;
      margin-left: 22.5px;
      margin-top: 20px;
    }
    .button{
      margin-top: 30px;
      text-align: center;
      button{
        width: 230px;
        height: 40px;
        line-height: 40px;
        background: #ff6257;
        border: 0 none;
        color: #fff;
        font-size: 20px;
        border-radius: 3px;
        cursor: pointer;
        letter-spacing: 5px;
      }
      button:hover{
        box-shadow: rgba(0,0,0,.2) 0 0 10px;
      }
    }
  }
}
.el-main{
  width: 1200px;
  margin: 0 auto;
  padding: 0;
  .hot-line{
    .hot-title{
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      h2{
        float: left;
        font-weight: 700;
        font-size: 28px;
        line-height: 44px;
      }
      p{
        font-size: 14px;
        font-weight: 700;
        color: #00c777;
        position: relative;
        margin-top: 10px;
      }
      p:after{
        display: block;
        content: "";
        width: 50px;
        position: absolute;
        bottom: -30%;
        left: 3px;
        border-bottom: 3px solid #00c777;
      }
    }
    .tab_list{
      .clearfix{
        overflow: hidden;
        li:nth-child(4n){
          margin-right: 0;
        }
        li{
          width: 280px;
          float: left;
          margin: 0 26px 20px 0;
          position: relative;
          .pic_box{
            width: 100%;
            height: 165px;
            position: relative;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .detail_box{
          height: 94px;
          border: 1px solid #eee;
          border-top: none;
          padding: 8px 10px 0;
          div{
            color: #999;
            line-height: 20px;
            margin-top: 8px;
            overflow: hidden;
            span{
              max-width: 198px;
              height: 20px;
              font-size: 16px;
              color: #333;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              white-space: nowrap;
            }
            em{
              font-style: normal;
              float: right;
              max-width: 105px;
              font-size: 16px;
              color: #ff6257;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              white-space: nowrap;
              i{
                font-style: normal;
              }
              .qi{
                font-size: 15px;
                color: #999;
              }
            }
          }
        }
        p{
          height: 44px;
          padding-top: 10px;
          font-size: 14px;
          color: #999;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .bottom{
    margin: 30px auto 0;
    overflow: hidden;
    ul{
      li{
        position: relative;
        width: 280px;
        float: left;
        margin: 0 26px 20px 0;
        h2{
          width: 40px;
          height: 74px;
          background: url(https://file.40017.cn/ship/img/ship_pc/ship_pc_index_bottom_tipicons.png) no-repeat 50%;
          float: left;
          margin-left: 30px;
        }
        p{
          padding: 15px 0 0 80px;
          span{
            display: block;
            font-size: 16px;
            color: #666;
          }
        }
      }
      li:after{
        display: block;
        content: "";
        width: 1px;
        height: 40px;
        background-color: #e4e4e4;
        position: absolute;
        right: -13px;
        top: 50%;
        margin-top: -20px;
      }
      li:last-child{
        margin-right: 0;
      }
      .bt-one{
        h2{
          background-position: 0 20px;
        }
      }
    }
  }
}
</style>